import { Button } from '@kube-design/components'
import { Modal } from 'components/Base'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import styles from './index.scss'

class HarborModal extends Component {
  static propTypes = {
    type: PropTypes.string,
    resource: PropTypes.string,
    visible: PropTypes.bool,
    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    desc: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    onOk: PropTypes.func,
    onCancel: PropTypes.func,
    isSubmitting: PropTypes.bool,
  }

  static defaultProps = {
    visible: false,
    isSubmitting: false,
    onOk() {},
    onCancel() {},
  }

  state = {
    confirm: '',
    harborData: null, // To store the data from /harbor/:workspace/robots
  }

  componentDidUpdate(prevProps) {
    // Fetch data when modal becomes visible
    if (this.props.visible && this.props.visible !== prevProps.visible) {
      this.fetchHarborData()
    }
  }

  componentDidMount() {
    // Fetch data when modal is mounted
    this.fetchHarborData()
  }

  fetchHarborData = async () => {
    const { workspace } = this.props

    try {
      // Perform network request to get data from /harbor/:workspace/robots
      const response = await fetch(`/harbor/${workspace}/robots`)
      const data = await response.json()

      // Update the state with the fetched data
      this.setState({ harborData: data })
    } catch (error) {
      console.error('Error fetching harbor data:', error)
    }
  }

  handleInputChange = e => {
    this.setState({ confirm: e.target.value })
  }

  handleOk = () => {
    this.props.onOk()
  }

  render() {
    const {
      type,
      resource,
      visible,
      onCancel,
      title,
      isSubmitting,
      workspace,
    } = this.props

    const { harborData } = this.state
    const { name, secret } = harborData || {}

    return (
      <Modal
        width={580}
        bodyClassName={styles.modalBody}
        visible={visible}
        isSubmitting={isSubmitting}
        onCancel={onCancel}
        hideHeader
        hideFooter
      >
        <div className={styles.body}>
          <div className="h5">
            {title ||
              (resource && type
                ? resource.split(', ').length === 1
                  ? // eslint-disable-next-line no-undef
                    t('HARBOR_STEP', { type: t(typeKey) })
                  : // eslint-disable-next-line no-undef
                    t('HARBOR_STEP', { type: t(typeKeyPl) })
                : t('HARBOR_STEP'))}
          </div>
          <div className={styles.content}>
            <h1>{`1.配置仓库地址(如已配置可忽略)`}</h1>
            <p>{`修改/etc/docker下的daemon.json配置文件，如果文件不存在创建一个。`}</p>
            <p>{`添加仓库配置："insecure-registries": ["registry.mengning.com.cn"]`}</p>
            <h1>{`2.重启docker服务(如已配置可忽略)`}</h1>
            <p>{`systemctl daemon-reload && systemctl restart docker`}</p>
            <h1>{`3.登录镜像仓库`}</h1>
            <p>{`docker login registry.mengning.com.cn`}</p>
            <p>{`Username: ${name}, Password: ${secret}`}</p>
            <h1>{`4.从我的镜像仓库拉取镜像`} </h1>
            <p>
              {`docker pull registry.mengning.com.cn/${workspace}/image:tag`}{' '}
            </p>
            <h1>{`5.向我的镜像仓库推送镜像`} </h1>
            <p>
              {`docker tag image:tag registry.mengning.com.cn/${workspace}/image:tag`}{' '}
            </p>
            <p>
              {`docker push registry.mengning.com.cn/${workspace}/image:tag`}{' '}
            </p>
          </div>
        </div>
        <div className={styles.footer}>
          <Button onClick={onCancel} data-test="modal-cancel">
            {t('OK')}
          </Button>
        </div>
      </Modal>
    )
  }
}

export default HarborModal
